<!--现场风险评估-->
<template>
  <div class="page">
    <div class="top-search">
      <div class="top-search-item">
        <el-button type="primary">新建评估</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="danger">删除评估</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="primary">评估估算</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="success">保存</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="primary">导出数据</el-button>
      </div>
      <div class="top-search-item">
        <el-button type="primary" @click="DialogHandleClick">查看风险点可视化图</el-button>
      </div>
      <div class="top-search-item">
        <el-input placeholder="请输入评估名称关键字" />
      </div>
      <div class="top-search-item">
        <el-button type="primary">检索</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          align="center"
        />
        <el-table-column
          label="评估名称"
          align="center"
        />
        <el-table-column
          label="评估模型"
          align="center"
        />
        <el-table-column
          label="企业名称"
          align="center"
        >
          <template slot-scope="scope">
            <div class="text-green" @click="comDialogHandleClick(scope.row)">
              {{ scope.row.com }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="责任人"
          align="center"
        />
        <el-table-column
          label="联系电话"
          align="center"
        />
        <el-table-column
          label="评估时间"
          align="center"
        />
        <el-table-column
          label="评估结果"
          align="center"
        />
        <el-table-column
          label="重大风险"
          align="center"
        />
        <el-table-column
          label="较大风险"
          align="center"
        />
        <el-table-column
          label="一般风险"
          align="center"
        />
        <el-table-column
          label="低风险"
          align="center"
        />
        <el-table-column
          label="备注"
          align="center"
        />
      </el-table>
    </div>
    <div class="bottom-content">
      <div class="bottom-content-left">
        <div class="bottom-content-left-top">
          <el-button type="primary">选择评估专家</el-button>
          <el-button type="danger">移出评估专家</el-button>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              align="center"
            />
            <el-table-column
              label="评估专家"
              align="center"
            />
            <el-table-column
              label="评估结果"
              align="center"
            />
          </el-table>
        </div>
      </div>
      <div class="bottom-content-right">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="风险点列表" name="first">
            <div class="bottom-content-right-top">
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">复制风险点</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">同级新增</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">下级新增</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="danger" size="mini">删除</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="danger" size="mini">清除所有</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">上移</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">下移</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">升级</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">降级</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">全部展开</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">全部折叠</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">导入Excel文件</el-button>
              </div>
              <div class="bottom-content-right-top-item">
                <el-button type="primary" size="mini">复制风险评估</el-button>
              </div>
            </div>
            <div class="bottom-content-right-bottom">
              <el-table
                :data="tableData1"
                style="width: 100%"
                row-key="id"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              >
                <el-table-column
                  label="风险识别点"
                  prop="date"
                />
                <el-table-column
                  label="风险类型"
                  prop="name"
                />
                <el-table-column
                  label="作业条件危险性"
                  width="150"
                />
                <el-table-column
                  label="危险事件发生可能性"
                  width="150"
                />
                <el-table-column
                  label="危险环境类型"
                  width="150"
                />
                <el-table-column
                  label="危险事件可能结果"
                  width="150"
                />
                <el-table-column
                  label="风险识别点代码"
                  width="150"
                />
                <el-table-column
                  label="检查依据"
                >
                  <template slot-scope="scope">
                    <div class="text-green" @click="editorDialogHandleClick(scope.row)">
                      {{ scope.row.dialog }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="整改措施"
                >
                  <template slot-scope="scope">
                    <div class="text-green" @click="editorDialogHandleClick(scope.row)">
                      {{ scope.row.dialog }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="隐患描述"
                >
                  <template slot-scope="scope">
                    <div class="text-green" @click="editorDialogHandleClick(scope.row)">
                      {{ scope.row.dialog }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="整改情况"
                >
                  <template slot-scope="scope">
                    <div class="text-green" @click="editorDialogHandleClick(scope.row)">
                      {{ scope.row.dialog }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      title="风险点可视化视图"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        内容
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 选择企业弹窗 -->
    <el-dialog
      title="选择企业"
      :visible.sync="comDialogVisible"
      width="30%"
    >
      <div class="top-search">
        <div class="top-search-item">
          <el-button type="primary">确定</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="info">取消</el-button>
        </div>
        <div class="top-search-item">
          <el-input placeholder="请输入企业名称关键字" />
        </div>
        <div class="top-search-item">
          <el-button type="primary">检索</el-button>
        </div>
      </div>
      <div class="content-dialog">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            label="企业名称"
          />
          <el-table-column
            align="center"
            label="负责人"
          />
          <el-table-column
            align="center"
            label="联系电话"
          />
          <el-table-column
            align="center"
            label="备注"
          />
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="comDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑器弹窗 -->
    <el-dialog
      title="编辑器弹窗"
      :visible.sync="editorDialogVisible"
      width="30%"
    >
      <div>
        <!-- 工具栏 -->
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :default-config="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
          v-model="html"
          style="height: 400px; overflow-y: hidden;"
          :default-config="editorConfig"
          @onChange="onChange"
          @onCreated="onCreated"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editorDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editorDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 编辑器采用 wangEditor Vue2版本
 * 文档地址: https://www.wangeditor.com
 */
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      tableData: [
        {
          com: 'XXX'
        }
      ],
      multipleSelection: [],
      activeName: 'first',
      tableData1: [{
        id: 1,
        date: '1',
        name: 'A',
        dialog: 'XX',
        children: [{
          id: 12,
          date: '11',
          name: 'A1',
          dialog: 'XX'
        }, {
          id: 13,
          date: '12',
          name: 'A2'
        }]
      }, {
        id: 2,
        date: '2',
        name: 'B'
      }],
      dialogVisible: false,
      comDialogVisible: false,
      editorDialogVisible: false,
      // 富文本编辑器相关
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {}
      },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 树形数据懒加载
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
        ])
      }, 1000)
    },
    // 弹窗
    DialogHandleClick() {
      this.dialogVisible = true
    },
    // 富文本
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
    },
    insertTextHandler() {
      const editor = this.editor
      if (editor == null) return
      editor.insertText(' hello ')
    },
    editorDialogHandleClick() {
      this.editorDialogVisible = true
    },
    comDialogHandleClick() {
      this.comDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 1rem;

  .top-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    .top-search-item {
      margin-right: 1rem;
    }
  }

  .content {
    margin-top: 2rem;
    width: 100%;
    height: 20rem;
  }
  .bottom-content {
    margin-top: 2rem;
    width: 100%;
    height: 22rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    .bottom-content-left {
      width: 20%;
      height: 22rem;
      padding-right: .5rem;
      .bottom-content-left-top {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 1rem 0;
      }
    }
    .bottom-content-right {
      border-left: 1px dashed #E4E7ED;
      width: 80%;
      height: 22rem;
      padding: 0 .5rem;
      .bottom-content-right-top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .bottom-content-right-top-item {
          margin-right: 1rem;
        }
      }
      .bottom-content-right-bottom {
        margin-top: 1rem;
      }
    }
  }
}

.text-green {
  color: #67C23A;
  cursor: pointer;
}
</style>
